import type { EChartsType } from "echarts";
import { defineStore } from "pinia";
import { ref } from "vue";

export const useChartStore = defineStore("chart", () => {
  function listenResize(chartComponent: EChartsType) {
    //在addEventListener中的第二个参数，需要EventListener类型，
    //但是如果直接调用一个方法的话，返回值是方法的返回，在这是个void，所以用匿名函数包装起来，让它变成一个函数作为EventListener类型
    window.addEventListener("resize", () => resizeChart(chartComponent));
    document
      .getElementsByClassName("expand-icon")[0]
      .addEventListener("click", () => resizeChart(chartComponent));
    document
      .getElementsByClassName("expand-icon")[1]
      .addEventListener("click", () => resizeChart(chartComponent));
  }

  function removeListener(chartComponent: EChartsType) {
    window.removeEventListener("resize", () => resizeChart(chartComponent));
    document
      .getElementsByClassName("expand-icon")[0]
      .removeEventListener("click", () => resizeChart(chartComponent));
    document
      .getElementsByClassName("expand-icon")[1]
      .removeEventListener("click", () => resizeChart(chartComponent));
  }

  function resizeChart(chartComponent: EChartsType) {
    if (chartComponent) {
      chartComponent.resize();
    }
  }

  return { listenResize, removeListener };
});
